<template>
  <Card :bordered="true">
    <p slot="title">基本信息： </p>
    <Row>
      <Col span="12">
      电影名：{{detail.title}}
      </Col>
      <Col span="12">
      上映年份：{{detail.year}}
      </Col>
    </Row>
    <Row>
      <Col span="12">
      评分：{{detail.rating&&detail.rating.average?detail.rating.average:'暂无'}}
      </Col>
      <Col span="12">
      评分人数：{{detail.ratings_count}}
      </Col>
    </Row>
    <Row>
      <Col span="6">
      <img :src="detail.images.medium" alt=""></Col>
      <Col span="18">
      简介：{{detail.summary}}
      </Col>
    </Row>

    <Row>
      <Col span="2">
      主演
      </Col>
      <Col span="12">
      <div v-for="cast in detail.casts" class="inline">
        <img :src="cast.avatars.small" alt="">
        <p>{{cast.name}}</p>
      </div>
      </Col>
    </Row>
  </Card>

</template>

<style scoped>
  .inline {
    display: inline-block;
    margin-right: 10px;
  }
</style>

<script>
  import api from '@/fetch/api';
  export default {
    beforeMount () {
      console.log(JSON.stringify(this.$route.params))
    },
    mounted() {
      this.getDetail(this.$route.params.id);
    },
    data () {
      return {
        detail: {}
      }
    },
    methods: {
      goBack () {
        this.$router.push({path: '/home'});
      },
      getDetail (id) {
        if (!id) {
          this.$Message.error('编号错误');
          return;
        }
        this.$emit('showLoading');
        api.fetchPost(api.path.subject + `/${id}`).then((data) => {
          //控制加载条
          this.$emit('hideLoading');
          this.detail = data;
          //console.log(JSON.stringify(data));
        }).catch(err => {
          this.$emit('hideLoading');
          this.$Message.error(err);
        })
      }
    }
  };
</script>
